<template>
  <div class="common-layout">
    <el-container>
      <el-header height="25%">
        <el-page-header :icon="null" @back="backout">
    <template #content>
      <div class="flex items-center">

        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
          点赞管理
        </span>
        <el-tag>admin</el-tag>
        <el-button style="margin-left: 16px" @click="drawer = true">
              统计管理
            </el-button>
          
            <el-drawer size=50% v-model="drawer" title="I am the title" :with-header="false" direction="btt">
              <span>    
                <el-row>
                <EchartsChart></EchartsChart>
                <EchartsChart1></EchartsChart1>
                <EchartsChart2></EchartsChart2>
                <EchartsChart3></EchartsChart3>
                </el-row>
              </span>
            </el-drawer>
      </div>
    </template>
    <template #extra>
      <div class="flex items-center">
        <el-space :size="size" :spacer="spacer">
          <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </template>
      <template #default>
        <div
          class="demo-rich-conent"
          style="display: flex; gap: 16px; flex-direction: column"
        >
          <el-avatar
            :size="60"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            style="margin-bottom: 8px"
          />
          <div>
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              Admin
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--el-color-info)"
            >
              @beathub.com
            </p>
          </div>

          <p class="demo-rich-content__desc" style="margin: 0">
            生产队的驴正在加紧赶工......
          </p>
        </div>
      </template>
    </el-popover>
      </el-space>
        <el-button type="danger" plain class="ml-2" @click="logout">退出</el-button>
      </div>
    </template>
  </el-page-header>
  <el-divider content-position="right">管理员操作</el-divider>
        <!-- 查询框 -->
        <div class=box>
          <!-- <el-input v-model="formInline" class="input-width"  placeholder="请输入" /> -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="作品名称">
              <el-input v-model="formInline.workname" placeholder="作品模糊查询" clearable />
            </el-form-item>
            <el-form-item>
    <el-button type="danger" @click="btnQuery"><i class="iconfont icon-chaxun"></i></el-button>
    </el-form-item>
          </el-form>
        </div>

      </el-header>
      <br>
      <!-- 此为用户信息管理头部 -->
      <el-main>
        <!-- 页面主体显示内容 -->
        <el-table :data="tableData" style="width: 100%">
          <!-- <el-table-column label="作品ID" width="250">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon>
                  <timer />
                </el-icon>
                <span style="margin-left: 10px">{{ scope.row.workid }}</span>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="uname" label="点赞用户名" width="250">
            <template #default="scope">
              <el-popover effect="light" trigger="hover" placement="top" width="auto">
                <template #default>
                  <div>用户名: {{ scope.row.uname }}</div>
                  <div>联系方式: {{ scope.row.phone }}</div>
                </template>
                <template #reference>
                  <el-tag>{{ scope.row.uname }}</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="workname" label="点赞作品" width="250">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon>
                  <timer />
                </el-icon>
                <span style="margin-left: 10px">{{ scope.row.workname }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="作品类别" width="250">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon>
                  <timer />
                </el-icon>
                <span style="margin-left: 10px">{{ scope.row.worksort }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="create_date" label="点赞时间" sortable width="250">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon>
                  <timer />
                </el-icon>
                <span style="margin-left: 10px">{{ scope.row.create_date }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled" icon-color="#626AEF"
                title="你确定要删除吗?" @confirm="deleteClick(scope.row.likeid)">
                <template #reference>
                  <el-button type="danger" size="small" @click="deleteClick"><i class="iconfont icon-lajitong"></i></el-button>
                </template>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
        <div class="table-page">
        <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[5,10,20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes,prev, pager, next, jumper"
      :total="pageInfo.total"  
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</div>
      </el-main>
    </el-container>
  </div>
</template>
  
<script>
import axios from 'axios';
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import EchartsChart from './components/VideoLike.vue'
import EchartsChart1 from './components/MusicLike.vue'
import EchartsChart2 from './components/ScoreLike.vue'
import EchartsChart3 from './components/TextLike.vue'

import { ElMessage } from 'element-plus'
//import { Timer } from '@element-plus/icons-vue'
import { ArrowLeft } from '@element-plus/icons-vue'
//import { de } from 'element-plus/es/locale'
import { ref } from 'vue'
import { h } from 'vue'
   import { ElDivider } from 'element-plus'

export default {
  setup() {
      const size = ref(50)
      const spacer = h(ElDivider, { direction: 'vertical' })

      // 在这里可以进行其他的逻辑设置

      return {
        size,
        spacer,
        // 其他需要暴露给模板的属性
      }
    },
  components:{
    EchartsChart,
    EchartsChart1,
    EchartsChart2,
    EchartsChart3
  },


  data() {
    return {
      input: ref(''),
      drawer: ref(false),
      formInline: {
        workname: ""
      },
      tableData: [],
      pageInfo:{},   //分页信息对象
      pageSize:5,    //当前页条数
      currentPage:1,  //当前页号
    }
  },
  mounted() {
     this.LoadData()//加载点赞信息
    this.getPageData(1,5)

  },
  methods: {
    center(){
      this.$router.push('admincenter')
    },
    logout() {
      this.$router.push('/');
    },
    backout() {
      this.$router.push('/welcome');
    },
    handleSizeChange(pageSize){   //选择每一页显示的记录数
      this.pageSize = pageSize
      this.currentPage=1;
      this.getPageData(this.currentPage,this.pageSize)
console.log("size:",pageSize);
    },
    handleCurrentChange(pageNum){  //切换页号时得到当时页号
      this.currentPage = pageNum
      this.getPageData(this.currentPage,this.pageSize)
      console.log("num:",pageNum);

    },
    getPageData(num,size){   //得到分页数据
      this.$http.get("http://localhost:8080/like/pages",{params:{pageNum:num,pageSize:size}}).then((response)=>{
        this.pageInfo = response.data
        this.tableData = this.pageInfo.list
      })  
    },

    btnQuery() {
      console.log(this.formInline)
      this.currentPage=1;
      this.LoadData();
    },
    LoadData() {              //重加载数据
      this.$http.get("http://localhost:8080/like/list?workname=" + this.formInline.workname).then((res) => {
        this.tableData = res.data;
        this.pageInfo.total = res.data.length;
        console.log(res.data);
      }).catch((err) => {
        console.log(err);
      })
    },
    deleteClick(likeid) {    //删除操作
      console.log(likeid);
      this.$http.get("http://localhost:8080/like/del/" + likeid).then((res) => {
        console.log(res.data);
        if (res.data == 1) {
          console.log("删除成功");
          this.LoadData()
          ElMessage({
            message: '删除成功',
            type: 'success',
          })
        } else {
          console.log("删除失败");
          this.LoadData()
          ElMessage({
            message: '删除失败',
            type: 'warning',
          })
        }
      }).catch((err) => {
        // console.log(err);
      })
    },
  }
}
</script>

<style>
.input-width {
  width: 40%;
  /* 设置宽度为100% */
  resize: none;
  /* 禁止调整大小 */
}

.box {
  position: relative;
  top: 20px;
}
.table-page{
  float:right;
  margin:12px
  }
</style>